<template>
	<view>
		<my-navbar title="放学时间" :border="true"></my-navbar>
		<view class="app-background"></view>
		<view class="hometimeDetail">
			<view v-for="(i, j) in leaveMap" :key="j" class="hometimeDetail-item" hover-class="button-hover" @click="clickTimeItem(j)">
				<view class="item-main">
					<view class="main-label">{{ i }}</view>
					<view class="main-value" >
						<template v-if="hometimeData.data">
							<text v-if="hometimeData.data[j]==='放假'" class="holiday">{{hometimeData.data[j]}}</text>
							<text v-else-if="hometimeData.data[j]" class="time">{{hometimeData.data[j]}}</text>
							<text v-else class="unset">未设置</text>
						</template>
						<template v-else>
							<text>--</text>
						</template>
					</view>
					<image class="main-icon" src="/static/my/icon_right.png"></image>
				</view>
				<view class="item-line"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			squad: '',
			hometimeData: {
				data: null,
				getData: async () => {
					const context = this.hometimeData;
					const page = {};
					const data = {
						squad: this.squad
					};
					uni.showLoading({
						mask: true
					});
					let res1;
					try {
						res1 = await this.$api.hometime.get_list({ page, data });
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '获取放学时间数据失败');
						return;
					}
					context.data = res1.result.data[0] || {};
					uni.hideLoading();
				}
			},
			leaveMap: {
				monLeave: '周一',
				tuesLeave: '周二',
				wedLeave: '周三',
				thurLeave: '周四',
				friLeave: '周五',
				satLeave: '周六',
				sunLeave: '周日'
			}
		};
	},
	methods: {
		clickTimeItem(leaveKey) {
			uni.navigateTo({
				url: '/packageA/pages/my/changeHometime' + `?squad=${this.squad}&leaveKey=${leaveKey}`
			});
		}
	},
	onLoad(options) {
		this.squad = options.squad;
	},
	async onShow(options) {
		try {
			await this.hometimeData.getData();
		} catch (err) {}
	},
	async onPullDownRefresh() {
		try {
			await this.hometimeData.getData();
		} catch (err) {}
		uni.stopPullDownRefresh();
	}
};
</script>

<style lang="less" scoped>
.hometimeDetail {
	background-color: #ffffff;

	.hometimeDetail-item {
		height: 100rpx;

		transition: all 0.3s;

		display: flex;
		flex-direction: column;

		.item-main {
			flex: 1;
			padding: 0 30rpx;

			display: flex;
			align-items: center;
			justify-content: space-between;

			.main-label {
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
			}

			.main-value {
				flex: 1;

				font-size: 28rpx;
				text-align: right;
				
				.holiday {
					color: #ff6600;
				}

				.time {
					color: #808080;
				}
				
				.unset {
					color: #ff5d5d;
				}

			}

			.main-icon {
				width: 14rpx;
				height: 24rpx;
				margin-left: 20rpx;
			}
		}

		.item-line {
			border-bottom: 2rpx solid #e3e4e6;
			margin-left: 30rpx;
		}

		&:last-child {
			.item-line {
				border-bottom: none;
			}
		}
	}
}
</style>
